<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>考核进度</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/performance-management/appraise-progress.css">
    <style>
      
    </style>
  </head>

  <body>
    <div class="title-name">
      <div class="page-header">
        <span class="title-style"></span><h4>考核进度</h4>
      </div>
      <!--  -->
      <div class="search-reset">
        <!-- 搜索 -->
        <div class="search">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="计划名称搜索"
              id="searchInput"
            />
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" id="searchBtn">
                搜索
              </button>
            </span>
          </div>
        </div>
        <!-- 重置 -->
        <div>
          <button type="button" class="btn btn-default" id="resetBtn">
            重置
          </button>
        </div>
      </div>
    </div>

    <!-- 考核进度 -->
    <div class="well-box">
      <!-- <div class="well well-lg">
        <div class="left-well">
          <div>
            <h5>
              研发部计划&nbsp;&nbsp;&nbsp;<span class="label label-success"
                >&nbsp;·&nbsp;半年度&nbsp;</span
              >
            </h5>
          </div>
          <div>考核范围：研发一组</div>
          <div>考核周期：2022-01~2022-06</div>
        </div>
        <div class="center-line">
          &nbsp;|&nbsp;
        </div>
        <div class="center-well">
          <div>
            <h5>考核进度</h5>
          </div>
          <div>
            考核总人数：<span>100</span>&nbsp;|&nbsp;评分中：<span>33</span>&nbsp;|&nbsp;已完成：<span>33</span>&nbsp;|&nbsp;已确认：<span>34</span>
          </div>
        </div>
        <div class="right-well">
          <button type="button" class="btn btn-link del">终止考核</button>
        </div>
      </div> -->
    </div>
    <!-- 页码 -->
    <div class="pagination-box">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous" id="pre">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="pagination-num"></li>
        <li>
          <a href="#" aria-label="Next" id="next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </div>
    <script>
      // 数据
      let data = [
        {
          id: 1,
          name: "研发部考核计划1",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 2,
          name: "研发部考核计划2",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 3,
          name: "研发部考核计划3",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 4,
          name: "研发部考核计划4",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 5,
          name: "研发部考核计划5",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 6,
          name: "研发部考核计划6",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 7,
          name: "研发部考核计划7",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 8,
          name: "研发部考核计划8",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 9,
          name: "研发部考核计划9",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 10,
          name: "研发部考核计划10",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 11,
          name: "研发部考核计划1",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 12,
          name: "研发部考核计划1",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 13,
          name: "研发部考核计划1",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 14,
          name: "研发部考核计划3",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 15,
          name: "研发部考核计划4",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 16,
          name: "研发部考核计划1",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",

          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 17,
          name: "研发部考核计划2",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 18,
          name: "研发部考核计划1",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 19,
          name: "研发部考核计划2",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 20,
          name: "研发部考核计划6",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 21,
          name: "研发部考核计划6",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
        {
          id: 22,
          name: "研发部考核计划1",
          range: "研发一组,研发二组",
          type: "半年度",
          cycle: "2022-01~2022-06",
          state: "未开始",
          grading: 33,
          done: 33,
          determined: 34,
          headcount: 100,
        },
      ];
      // 每页展示3个
      const pageSize = 3;

      // Tbody动态渲染
      function renderWellBox(data, currentPage = 1) {
        // 渲染paging
        renderPaging(data, currentPage);
        // 清空页面
        $(".well-box").empty();

        const startIndex = pageSize * (currentPage - 1);
        const endIndex = startIndex + pageSize;
        const dataByPaging = data.slice(startIndex, endIndex);
        console.log(
          "startIndex,endIndex,dataByPaging",
          startIndex,
          endIndex,
          dataByPaging
        );
        for (let i = 0; i < dataByPaging.length; i++) {
          const dataId = dataByPaging[i].id;
          const dataName = dataByPaging[i].name;
          const dataRange = dataByPaging[i].range;
          const dataType = dataByPaging[i].type;
          const dataCycle = dataByPaging[i].cycle;
          const dataState = dataByPaging[i].state;
          const dataHeadcount = dataByPaging[i].headcount;
          const dataGrading = dataByPaging[i].grading;
          const dataDone = dataByPaging[i].done;
          const dataDetermined = dataByPaging[i].determined;
          console.log("dataName", dataName);

          $(".well-box").append(`
      <div class="well well-lg">
        <div class="left-well">
          <div>
            <h5>
              ${dataName}&nbsp;&nbsp;&nbsp;<span class="label label-success"
                >&nbsp;·&nbsp;${dataType}&nbsp;</span
              >
            </h5>
          </div>
          <div>考核范围：${dataRange}</div>
          <div>考核周期：${dataCycle}</div>
        </div>
        <div class="center-line">
          &nbsp;|&nbsp;
        </div>
        <div class="center-well">
          <div>
            <h5>考核进度</h5>
          </div>
          <div>
            考核总人数：<span>${dataHeadcount}</span>&nbsp;|&nbsp;评分中：<span>${dataGrading}</span>&nbsp;|&nbsp;已完成：<span>${dataDone}</span>&nbsp;|&nbsp;已确认：<span>${dataDetermined}</span>
          </div>
        </div>
        <div class="right-well">
          <button type="button" class="btn btn-link del" data-id="${dataId}">终止考核</button>
        </div>
      </div>
    `);
        }
      }
      renderWellBox(data);

      /*
分页
*/
      function renderPaging(data, currentPage = 1) {
        // 清空
        $(".pagination-num").empty();

        const num = Math.ceil(data.length / pageSize);
        console.log(
          "num",
          num,
          "data.length",
          data.length,
          "currentPage",
          currentPage
        );
        for (let i = 1; i <= num; i++) {
          $(".pagination-num").append(`
            <a href="#">${i}</a>
      `);
        }
        $(".pagination-num>a")
          .eq(currentPage - 1)
          .addClass("currentPageColor");
      }

      // 处理上一页
      $("#pre").on("click", function (event) {
        // 获取到当前页
        const currentPage = parseInt(
          $(".pagination-num > .currentPageColor").text()
        );
        // 当前页为1  就不能上一页
        if (currentPage === 1) {
          return;
        }

        renderWellBox(data, currentPage - 1);
      });

      // 处理下一页
      $("#next").on("click", function (event) {
        // 获取到当前页
        const currentPage = parseInt(
          $(".pagination-num > .currentPageColor").text()
        );

        console.log();
        const max = Math.ceil(data.length / pageSize);
        // 当前页为 max 就不能下一页
        if (currentPage === max) {
          return;
        }

        renderWellBox(data, currentPage + 1);
      });
      // 为每一个页码添加点击事件
      $(".pagination-num").on("click", "a", function (event) {
        // 清空所有的样式
        $("#paging > a").removeClass(".pagination-num a");
        $(event.target).addClass("currentPageColor");
        // 获取点击页面
        const currentPage = parseInt($(event.target).text());
        renderWellBox(data, currentPage);
      });

      // 搜索
      $("#searchBtn").on("click", function (event) {
        // 获取searchInput搜索框输入的内容
        let searchValue = $("#searchInput").val();
        // 判空
        if (!searchValue) {
          // 清空的时候显示原来的数据
          renderWellBox(data);
          return;
        }
        const searchData = [];
        for (let i = 0; i < data.length; i++) {
          if (data[i].name.includes(searchValue)) {
            searchData.push(data[i]);
          }
        }
        renderWellBox(searchData);
      });

      // 重置
      $("#resetBtn").on("click", function (event) {
        $("#searchInput").val("");
        renderWellBox(data);
      });

      // 终止考核
      
      $(".well-box").on("click",".del", function (event) {
      $("body").append(`
            <div class="modal fade" id="myModal-del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">终止考核提示</h4>
                        </div>
                        <div class="modal-body">
                            是否终止考核？
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default cancelBtn-del" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="confirm-del">
                                确认终止
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `);
      // 显示模态框
      $("#myModal-del").modal("show");
      var id = parseInt(event.target.dataset.id);
      // 确认删除
      $("#myModal-del").on("click", "#confirm-del", (event) => {
        // $(this).parent().parent().remove();

        for (let i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            data.splice(i, 1);
            break;
          }
        }
        // 隐藏模态框
        $("#myModal-del").modal("hide");
        // 基于新的数据重新渲染
        renderWellBox(data);
      });
    });
    </script>
  </body>
</html>
